<template>
	<view class="pageContainer" :class="vi_pageSize">
		<vi-notify :top="topfix" ref="vi_notify"></vi-notify>
		<module-loading ref="vi_loading" :loading="vi_loading" :loadingMask="vi_loadingMask"></module-loading>
		<vi-headbar goback>
			<view slot="right">
				响应式
				<text class="response">开启</text>
				<text class="noresponse color-warning">关闭</text>
			</view>
			{{vi_pageTitle}}
		</vi-headbar>
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>type</view>
				<view>String</view>
				<view>primary</view>
				<view>按钮主题色</view>
			</view>
			<view class="tr">
				<view>color</view>
				<view>String</view>
				<view>无</view>
				<view>按钮自定义颜色</view>
			</view>
			<view class="tr">
				<view>textColor</view>
				<view>String</view>
				<view>无</view>
				<view>按钮固定文字色。格式#fff</view>
			</view>
			<view class="tr">
				<view>radius</view>
				<view>String</view>
				<view>0.25em</view>
				<view>按钮圆角</view>
			</view>
			<view class="tr">
				<view>size</view>
				<view>String</view>
				<view>md</view>
				<view>按钮预定义尺寸。可选sm、md、lg</view>
			</view>
			<view class="tr">
				<view>plain</view>
				<view>Boolean</view>
				<view>无</view>
				<view>按钮镂空</view>
			</view>
			<view class="tr">
				<view>borderWidth</view>
				<view>String, Number</view>
				<view>1</view>
				<view>按钮边框宽，镂空时有效</view>
			</view>
			<view class="tr">
				<view>value</view>
				<view>String, Number</view>
				<view>1</view>
				<view>当前页码</view>
			</view>
			<view class="tr">
				<view>total</view>
				<view>String, Number</view>
				<view>无</view>
				<view>记录总数，用于计算页数</view>
			</view>
			<view class="tr">
				<view>pageSize</view>
				<view>String, Number</view>
				<view>20</view>
				<view>每页记录数，用于计算页数</view>
			</view>
			<view class="tr">
				<view>showIcon</view>
				<view>Boolean</view>
				<view>true</view>
				<view>按钮显示为图标，否则显示为文字</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>icon</view>
					<view>Object</view>
					<view></view>
					<view>iconfont图标数据覆盖</view>
				</view>
				<view class="appendix">
					格式：{key:"图标名"}
					<view>prevPage：icon-arr-left 上一页</view>
					<view>nextPage：icon-arr-right 下一页</view>
				</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>text</view>
					<view>Object</view>
					<view></view>
					<view>内部文字数据覆盖</view>
				</view>
				<view class="appendix">
					格式：{key:"文字"}
					<view>prev：上一页</view>
					<view>next：下一页</view>
				</view>
			</view>
		</view>
		
		<view class="p-sm">
			<view class="py-sm">
				基本使用：{{`&lt;vi-tag>文字内容&lt;/vi-tag>`}}
			</view>
			<view class="py-sm">
				<vi-pagination :value="value" :total="500" :pageSize="30" @change="onchange"></vi-pagination>
			</view>
			<view class="py-sm">
				{{result}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:1,
				result:"",
			}
		},
		methods:{
			onchange(e){
				this.result = JSON.stringify(e)
			}
		}
	}
</script>

<style lang="scss" scoped>
.pageContainer{
	
}
</style>
